<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>插入和替换元素操作</title>
        <!-- 插入和替换元素操作：针对元素增删改操作：针对元素增删改操作
         append()           功能：在匹配元素集合中所有元素的内部末尾插入内容
         prepend()          功能：在匹配元素集合中所有元素的内部开头插入内容
         
         after()            功能：在匹配元素集合中所有元素的后面插入内容
         before()           功能：在匹配元素集合中所有元素的前面插入内容
         
         remove()           功能：移除匹配元素集合中所有的元素和子元素【盒子模型都删掉】
         empty()            功能：清空匹配元素集合中所有元素的内容【盒子模型不删掉】
         
         replaceWith()      功能：
         -->
        <style>
            button{
                margin: 5px;
                padding: 10px 15px;
                cursor: pointer;
            }
            body{
                margin: 20px;
            }
            div#target{
                border: 1px solid #ee6f6f;
                margin-top: 10px;
                padding: 10px;
                border-radius: 5px;
            }
        </style>
        <script src="../js/jquery-1.11.1.js"></script>
    </head>
    <body>
        <!-- html：7个按钮  div包含p包含：目标元素的初始段落  id="target"
                           div包含p包含：插入新元素的初始段落  id="newElement" 隐藏
             css:按钮：外边距5px，内边距：10px 15px    鼠标移动上：手指显示
                body：外边距20px
                #target：1.像素边框、内边距：10px、上外边框：10px
            引入JQ
         -->
         <button id="appendBtn">内部末尾插入元素</button>
         <button id="prependBtn">内部开头插入元素</button>
         <button id="afterBtn" class="add">外部后面插入元素</button>
         <button id="beforeBtn" class="add">外部前面插入元素</button>
         <button id="removeBtn">删除元素</button>
         <button id="emptyBtn">清空元素</button>
         <button id="replaceWithBtn">替换元素</button>
         <!-- 目标元素的初始段落 -->
         <div id="target">
             <p>目标元素的初始段落</p>
         </div>
         <!-- 用于插入跟替换的区域 -->
         <div id="newElement" class="bef" style="display:none;">
             <p>插入新元素的初始段落</p>
         </div>
         <script>
             // 点击  内部末尾插入元素    按钮  p文本后面追加新元素中包含内容操作
             $("#appendBtn").click(function(){
                 // 效果： 点击按钮    追加“新元素---自带内容”
                 // 1.1 追加内容是新元素---克隆---html结构全部复制出来，元素包含属性
                 var cpe=$("#newElement").clone();
                 // clone() 创建一个元素的副本，副本包含：内部元素以及所有属性和属性值
                 // 1.2 自带属性和属性值：隐藏---改成显示
                 cpe.css("display","block");
                 // 1.3 将复制出来的新元素，追加给当前元素上
                 $("#target").append(cpe);
             });
             // 点击  内部末尾插入元素    按钮  p文本后面追加新元素中包含内容操作
             $("#prependBtn").click(function(){
                 var cpe=$("#newElement").clone();
                 cpe.css("display","block");
                 $("#target").prepend(cpe);
             });
             // 点击  外部后面插入元素    按钮  p文本后面追加新元素中包含内容操作
             $("#afterBtn").click(function(){
                 var cpe=$("#newElement").clone();
                 cpe.addClass(".add");
                 $("#target").after(cpe);
             });
             // 点击  外部前面插入元素    按钮  生成 图形，保留背景色，文本不需要
             //                               背景图 300*300
             $(".add").click(function(){
                 var cpe=$("#newElement").clone();
                 cpe.css({
                     "display":"block",
                     "border-radius":"50%",
                     "width":"300px",
                     "height":"300px",
                     "background-color":"#bef",
                     "background-image":"url(../img/123.png)",
                     "background-size":"contain",
                     "background-repeat":"no-repeat",
                     "background-position":"center",
                     "color":"transparent"
                 });
                 $("#target").before(cpe);
             });
             // 5.点击    删除元素    按钮  页面上所有的元素包括子元素全部删除【盒子模型不删】
             $("#removeBtn").click(function(){
                 $("target").remove();
             });
             // 6.点击    清空元素    按钮  页面上所有元素中内容全部删除【盒子模型不删】
             $("#emptyBtn").click(function(){
                 $("#target").empty();
             });
             // 7.点击    替换元素    按钮  页面上目标元素替换为新元素
             $("#replaceWithBtn").click(function(){
                 // 克隆  新元素 #newElement【父子级】
                 var c=$("#newElement").clone().css("diplay","block");
                 // 替换  找到  目标元素    替换  新元素
                 $("#target").replaceWith(c);
             });
         </script>
    </body>
</html>